<script setup lang="ts">
import CdlDescriptions from "@/components/descriptions";
import { useRoute, useRouter } from "vue-router";
import {h, ref} from "vue";
import type { DescriptionsTree } from "@/interfaces/components/Descriptions";
import type { FormData } from "@/interfaces/components/Page";
import type { Authentication, Shipper } from "@/interfaces/views/vehicle/shipper";
import { useGetShipperInfoApi, useRemoveShipperApi, useShipperResetPasswordApi } from "@/api/vehicle/shipper";
import { mergeObjects } from "@/utils/utilities";
import { ElMessage, ElMessageBox } from "element-plus";
import CdlImage from "@/components/Image";
import constant from "@/utils/constant";

const router = useRouter()
const route = useRoute()
if(route.query.id) initData()

const basicDescriptionsTree: DescriptionsTree<Shipper> = [
  {label: "托运联系人姓名", prop: "contact"},
  {label: "托运联系人手机号", prop: "mobile"},
  {label: "认证状态", prop: "status", dict: "shipper_status"},
  {label: "创建人/创建时间"},
  {label: "更新人/更新时间"},
  {label: "备注", prop: "remark"},
]
const authDescriptionsTree: DescriptionsTree<Authentication> = [
  {label: "托运人(企业)全称", prop: "name"},
  {label: "统一社会信用代码或个人证件号", prop: "idNum"},
  {label: "企业法人姓名", prop: "legalPerson"},
  {label: "企业法人联系方式", prop: "legalPersonPhone"},
  {label: "企业通信地址", prop: "address", span: 2},
  {label: "法人身份证(正面)", prop: "legalPersonIdCardImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "营业执照", prop: "businessLicenseImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "托运联系人身份证(正面)", prop: "contactIdCardImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
]

const basicData = ref<FormData<Shipper>>({
  contact: "",
  mobile: "",
  status: undefined,
  creator: "",
  createTime: "",
  updater: "",
  updateTime: "",
  remark: ""
})
const authData = ref<FormData<Authentication>>({
  name: "",
  idNum: "",
  legalPerson: "",
  legalPersonPhone: "",
  address: "",
  legalPersonIdCardImg: "",
  businessLicenseImg: "",
  contactIdCardImg: ""
})


/**
 * 初始化数据
 */
function initData(){
  useGetShipperInfoApi(route.query.id as string).then(res =>{
    mergeObjects(basicData.value, res.data)
    mergeObjects(authData.value, res.data)
  })
}

/**
 * 跳转编辑页面
 */
function jumpShipperUpdate(){
  router.push({
    path: "/vehicleManage/shipper/createAndModifyShipper",
    query: {
      id: route.query.id
    }
  })
}

/**
 * 重置密码
 */
function resetPassword(){
  ElMessageBox.confirm(
    '此操作将该托运人账号密码重置为手机号后4位，确认是否继续?',
    '警告',
    {
      confirmButtonText: '继续',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    useShipperResetPasswordApi(route.query.id as string).then(()=> {
      ElMessage.success("重置密码成功！")
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消',
    })
  })
}

/**
 * 删除托运人
 */
function removeShipper(){
  ElMessageBox.confirm(
    '在删除前需解除一切与该托运人相关联的数据，否则会导致删除失败!此操作将该托运人账号永久删除，请确认是否继续?',
    '警告',
    {
      confirmButtonText: '继续',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    useRemoveShipperApi(route.query.id as string).then(()=> {
      ElMessage.success("删除成功！自动跳转上一页")
      fallbackPage()
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消',
    })
  })
}
/**
 * 回退页面
 */
function fallbackPage(){
  router.back()
}
</script>

<template>
  <el-card style="position: relative">
    <button class="back_btn" @click="fallbackPage"></button>
    <div class="main_control">
      <el-button type="success" @click="jumpShipperUpdate" v-auth="'vehicle:shipper:update'">编辑</el-button>
      <el-button type="danger" @click="resetPassword" v-auth="'vehicle:shipper:update'">重置密码</el-button>
      <el-button type="danger" @click="removeShipper" v-auth="'vehicle:shipper:delete'">删除</el-button>
    </div>
    <h1 class="top_line">基础信息</h1>
    <el-divider></el-divider>
    <CdlDescriptions :model="basicData" :template-tree="basicDescriptionsTree"></CdlDescriptions>
    <div v-if="basicData.status === 2">
      <h1>认证信息</h1>
      <el-divider></el-divider>
      <CdlDescriptions :model="authData" :template-tree="authDescriptionsTree"></CdlDescriptions>
    </div>
  </el-card>
</template>
